/**
 * useRef返回一个ref对象，返回的ref对象在组件的整个生命周期保持不变。
 * 用法一：引入DOM（或者组件，但是需要是class组件）元素；
 * 用法二：保存一个数据，这个对象在整个生命周期中可以保存不变；
 */
import React, { Component, useRef } from 'react'

//必须是类组件才能使用useRef
class TestCpns extends Component {
  render() {
    return <h2>TestCpns</h2>
  }
}

export default function RefHookDemo() {
  const h2Ref = useRef();
  const inputRef = useRef();
  const testRef = useRef();

  function changeDom() {
    h2Ref.current.innerHTML = "Hello useRef";
    inputRef.current.focus();

    console.log(testRef.current);
  }

  return (
    <div>
      <h2 ref={h2Ref}>RefHookDemo</h2>
      <input ref={inputRef} type="text" />

      <button onClick={e => changeDom()}>修改DOM</button>

      <TestCpns ref={testRef}/>
    </div>
  )
}
